<template>
  <div class="index-box">
      <div class="title">
          <span>结算单列表</span>
      </div>
      <div class="index-middlebox">
          <div class="middle-item">
              <span>结算状态</span>
              <template>
                  <el-select placeholder="请选择" v-model="value">
                      <el-option v-for="item in rankList" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </template>
          </div>
          <!-- <div class="middle-item">
              <span>商品名称</span>
              <template>
                  <el-input class="productname-input" v-model="supplierid"></el-input>
              </template>
          </div> -->
          <div class="middle-item">
              <span>结算日期</span>
              <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          </div>
          <div class="middle-item" style="width:300px;">
              <template>
                  <el-button type="primary" class="search" @click="getfindSettleList">搜索</el-button>
                  <!-- <el-button type="primary" class="search2">新增收货单</el-button> -->
              </template>
          </div>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        border
                        style="width: 100%">
                <el-table-column type="index"
                                label="序号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="corrency_date"
                                label="结算日期"
                                 align="center"> 
                </el-table-column>
                <el-table-column prop="property_management_fee"
                                label="物业管理费"
                                 align="center">
                </el-table-column>
                <el-table-column prop="water_electricity_cost"
                                label="水电费"
                                 align="center">
                </el-table-column>
                <el-table-column prop="cost_total"
                                label="总兑换费"
                                 align="center">
                </el-table-column>
                <el-table-column prop="company_fianl_status"
                                label="确认状态"
                                 align="center">
                                 <template slot-scope="scope">
                                  <span v-if="scope.row.company_fianl_status == 1">已提交</span>
                                  <span v-if="scope.row.company_fianl_status == 2">已确认</span>
                                  <span v-if="scope.row.company_fianl_status == 3">已拒绝</span>
                                </template>
                </el-table-column>
                <el-table-column prop="company_fianl_status"
                                label="审核状态"
                                 align="center">
                                 <template slot-scope="scope">
                                  <span v-if="scope.row.company_fianl_status == 1">提交</span>
                                  <span v-if="scope.row.company_fianl_status == 2">确认</span>
                                  <span v-if="scope.row.company_fianl_status == 3">拒绝</span>
                                </template>
                </el-table-column>
                <el-table-column prop="status"
                                label="结算状态"
                                 align="center">
                                 <template slot-scope="scope">
                                  <span v-if="scope.row.status == 0">未结算</span>
                                  <span v-if="scope.row.status == 1">结算中</span>
                                  <span v-if="scope.row.status == 2">已结算</span>
                                </template>
                </el-table-column>
                <el-table-column fixed="right"
                                label="操作"
                                width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary"
                                    @click="toPropertyStatementsdetails(scope.$index, scope.row)">明细</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </template>
      </div>
      <!-- 分页器 -->
      <div class="current">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getfindSettleList, getdeleteSettle} from "@/api/PropertyManagement";
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        merchandiseList:[],
        supplierid:'',
        rankList:[{
          value: 0,
          label: '未结算'
        },{
          value: 1,
          label: '已结算'
        },{
          value: 2,
          label: '结算中'
        },],
        value: '',
        date: '',
        total: 0, // 用户总条数
        pagesize: 10, //每页显示多少条，默认为10条
        pageNo: 1, // 当前页码，默认为第一页
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    //   获取列表
    getfindSettleList(){
        let data ={
            settleDate:this.date,
            pageNo: this.pageNo,
            pagesize: this.pagesize,
            settleStatus: this.value,
            companyFinalStatus:[1,2]
        }
        getfindSettleList(data).then(res => {
            console.log(res)
            this.merchandiseList = res.rows
            this.pageNo = res.pageNo
            this.pagesize = res.pageSize
            this.total = res.total
        })
    },
    handleSizeChange(val) {
        this.pagesize = val;
        this.getfindSettleList();
    },
    handleCurrentChange(val) {
        this.pageNo = val;
        this.getfindSettleList();
    },
    //   跳转详情
    toPropertyStatementsdetails(index,row){
        this.$router.push({
            name:'Statementsdetails',
            query:{ id:row.id }
        })
    },
    // 删除列表
    getdeleteSettle(index,row){
        let data = {
            id: row.id,
            propertyDelete:1,
            companyFianlStatus:row.company_fianl_status,
        }
        getdeleteSettle(data).then(res => {
            console.log(res)
            if(res.code == 20000){
                this.$message('删除成功')
                this.getfindSettleList()
            }
        })
    }
  } 
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.index-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .middle-item{
            span{
                display: inline-block;
                font-size: 14px;
                padding-right: 15px;
                padding-left: 30px;
                box-sizing: border-box;
            }
            .productname-input{
                width: 150px;
            }
            .search{
                width: 100px;
                margin-left:20px;
            }
            .search2{
                width: 120px;
                margin-left:20px;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .current {
      .block {
        text-align: center;
      }
    }
}
</style>
